<template>
    <div>
        <div class="btn" @click="dialogFormVisible=true">
          新增计划
        </div>
        <el-dialog class="addBody" title="新增计划" :visible.sync="dialogFormVisible">
            <el-form class="addItem" :inline="true" :model="addPlanData" label-position="top" label-width="80px">
                <el-form-item label="计划名称"  
                :rules="[{ required: true, message: '年龄不能为空'},
                    { type: 'text', message: '年龄必须为数字值'}]" >
                    <el-input v-model="addPlanData.name" ></el-input>
                </el-form-item>
                <el-form-item label="计划年度"
                :rules="[{ required: true, message: '年龄不能为空'},
                    { type: 'text', message: '年龄必须为数字值'}]">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    <!-- <el-input v-model="addPlanData.year"></el-input> -->
                </el-form-item>
                <el-form-item label="保养层级"
                :rules="[{ required: true, message: '年龄不能为空'},
                    { type: 'text', message: '年龄必须为数字值'}]">
                    <el-input v-model="addPlanData.level"></el-input>
                </el-form-item>
                
            </el-form>
            <el-form class="addItem" :inline="true" :model="addPlanData" label-position="top" label-width="80px">
                <el-form-item label="保养方式"  
                :rules="[{ required: true, message: '年龄不能为空'},
                    { type: 'text', message: '年龄必须为数字值'}]" >
                    <el-input v-model="addPlanData.method" ></el-input>
                </el-form-item>
                <el-form-item label="保养日期"
                :rules="[{ required: true, message: '年龄不能为空'},
                    { type: 'text', message: '年龄必须为数字值'}]">
                    <el-input v-model="addPlanData.keepDate"></el-input>
                </el-form-item>
                <el-form-item label="过期失效天数"
                :rules="[{ required: true, message: '年龄不能为空'},
                    { type: 'text', message: '年龄必须为数字值'}]">
                    <el-input v-model="addPlanData.overDay"></el-input>
                </el-form-item>
                
            </el-form>

            <el-form class="addItem3" :inline="true" :model="addPlanData" label-position="top" label-width="80px">
                <el-form-item class="third_left" label="间隔时长(天)"  
                :rules="[{ required: true, message: '年龄不能为空'},
                    { type: 'text', message: '年龄必须为数字值'}]" >
                    <el-input v-model="addPlanData.skipDay" ></el-input>
                </el-form-item>
                <el-form-item class="third_right" label="备注"
                :rules="[{ required: true, message: '年龄不能为空'},
                    { type: 'text', message: '年龄必须为数字值'}]">
                    <el-input v-model="addPlanData.remark"></el-input>
                </el-form-item>
               
            </el-form>

            <el-form class="addItem4" :inline="true" :model="addPlanData" label-position="top" label-width="80px">
                <el-form-item label="保养设备"  
                :rules="[{ required: true, message: '不能为空'},
                    { type: 'text', message: '年龄必须为数字值'}]" >
                    <el-button style="width: 100%"  type="text" @click="deviceDialogFormVisible=true">
                        <!-- 哈哈哈 -->
                        <el-input v-model="addPlanData.skipDay" 
                        @click="deviceDialogFormVisible=true"
                        placeholder="请选择" >
                    </el-input>
                    </el-button>
                </el-form-item>

            </el-form>

            <el-form class="addItem5" :inline="true" :model="addPlanData" label-position="top" label-width="80px">
                <el-form-item  style="margin-top: 20px;" label="保养项目"  
                :rules="[{ required: true, message: '不能为空'},
                    { type: 'text', message: '年龄必须为数字值'}]" >
                    
                    
                    <!-- <el-input v-model="addPlanData.skipDay" ></el-input> -->
                </el-form-item>
                <div class="con-btn">
                        <el-button @click="keepProjectVisible = true">
                            关联
                        </el-button>
                    </div>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="keepPlanAdd">确 定</el-button>
            </div>
        </el-dialog>
        
        <el-dialog
            title="选择保养设备"
            :visible.sync="deviceDialogFormVisible"
            width="30%"
            :before-close="handleClose">
            <hr>
            <!-- <span>这是一段信息</span> -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="deviceDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="deviceDialogFormVisible = false">确 定</el-button>
            </span>
        </el-dialog>
      
        <el-dialog
            title="选择保养项目"
            :visible.sync="keepProjectVisible"
            width="30%"
            :before-close="handleClose">
            <hr>
            <!-- <span>这是一段信息</span> -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="keepProjectVisible = false">取 消</el-button>
                <el-button type="primary" @click="keepProjectVisible = false">确 定</el-button>
            </span>
            
            </el-dialog>

        <div>保养计划</div>
        <div>
            <el-table :data="plans" 
            border style="width: 100%">
                <el-table-column prop="name" label="计划名称" >
                </el-table-column>
                <el-table-column prop="id" label="计划编号" >
                </el-table-column>
                <el-table-column prop="year" label="保养年度">
                </el-table-column>
                <el-table-column prop="year" label="保养年度">
                </el-table-column>
                <el-table-column prop="level" label="保养层级">
                </el-table-column>
                <el-table-column prop="method" label="保养方式">
                </el-table-column>
                <el-table-column prop="keepDate" label="保养开始日期">
                </el-table-column>
                <el-table-column label="保养项目">
                    <template slot-scope="scope">
                        <span v-for="(item, index) in scope.row.keepProjects" :key="item.id">
                            <span v-if="index != 0">,</span>
                            {{ item.name }}    
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="备注">
                </el-table-column>
                <el-table-column prop="status" label="计划状态">
                </el-table-column>
                <el-table-column prop="createName" label="创建人">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间">
                </el-table-column>
            </el-table>

        </div>
    </div>
</template>

<script>
import { keepPlan } from '@/api/keep';
export default {
    data() {
        return {
            plans: [],
            keepProjectVisible: false,
            deviceDialogFormVisible: false,
            dialogFormVisible: false,
            addPlanData:{
                  name:"",
                  year:"",
                  level:"",
                  method:"",
                  keepDate:"",
                  overDay:"",
                  skipDay:"",
                  remark:"",
                  keepProjectGroupId:null,
                  projectUserIds:[]
          },
            options: [{
            value: '选项1',
            label: '2024'
            }, {
            value: '选项2',
            label: '2025'
            }, {
            value: '选项3',
            label: '2026'
            }],    
        }
    },
    mounted() {
        let that = this;
        keepPlan({

        }).then(res => {
            that.plans = res.data.data;
        })
    }
}
</script>

<style scoped>
.el-form-item__label{
    margin: 0;
}
 .btn{
      width: 100px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      /* float: right; */
      position: absolute;
      top: 50px;
      right: 20px;
      background-color: blue;
      color: #fff;
      border-radius: 5px;
  }
.addItem{
    display: flex;
    margin-bottom: 30px;
}
.addItem>div{
    width: 30%;
    margin: auto;
}
.addItem3>div{
    /* display: flex;
    flex-wrap: nowrap; */
    width: 30%;
    /* text-align: center; */
}
.addItem3>.third_left{
    margin-left: 10px;
}

.addItem3>.third_right{
    margin-right: 0;
    position: relative;
    left: 12px;
    width: calc(70% - 60px);
}
.addItem3>.third_right>input{
    margin: 0;
}
.addItem4>div{
    margin: 0;
    width: calc(100% - 20px);
    position: relative;
    left: 10px;
}

.addItem5{
    position: relative;
    display: flex;
}
.addItem5>.con-btn{
    position: absolute;;
    right: 10px;
    top: 10px;
}
</style>